<template>
	<div class="leader-area">
    <div class="top-bar">
      <div class="title-con" @touchstart="move" @touchmove="move">
        <mt-navbar v-model="selected"  refs="navTitle" class="navbar">  
            <mt-tab-item :class="{'tab-item-leader':tableader}" id="A">集团领导</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id="B">集团高管</mt-tab-item>
            <mt-tab-item :class="{'tab-item-leader':tableader}" id="C">返聘高管</mt-tab-item>
        </mt-navbar>
      </div>
      <div class="search-area">
          <i class="fenge-span icon-line"></i><span @click="showMask = !showMask"><img src="/static/imgs/search.png" alt=""></span>
      </div>
     
    </div>


      <mt-tab-container v-model="selected" >

          <mt-tab-container-item id="A">

              <v-down :total="totalNum" :dataList="dataSelList" @returnChecked="getCheckedValue" ></v-down>
              <div class="card-container" v-for="uint in unitContainer">       
                  <card-leader v-for="item in uint.memberList" :pay="uint.pay" :personnel="uint.personnel" :key="item.emplid" :info='item'></card-leader>	
              </div>              
          </mt-tab-container-item>
    	    <mt-tab-container-item id="B">
              <v-leader :margin="bool" :dataList="dataSelList" :total="totalNum" @getValue="getLeader" @returnChecked="getCheckedValue"  @dropDown="dropDown"></v-leader>
              <div class="card-container"  v-for="uint in unitContainer">
              	<card-leader v-for="item in uint.memberList" :key="item.emplid" :pay="uint.pay" :personnel="uint.personnel" :info='item'></card-leader>	
              </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="C">
              <v-down :total="totalNum" :dataList="dataSelList" @returnChecked="getCheckedValue"></v-down>
              <div class="card-container" v-for="uint in unitContainer">
                <card-leader v-for="item in uint.memberList" :key="item.emplid" :pay="uint.pay" :personnel="uint.personnel" :info='item'></card-leader>	
              </div> 
          </mt-tab-container-item>
      </mt-tab-container>


      <v-search :showSearch.sync="showMask" type="leader" :isEnd.sync="isLoadEnd" :pageNum.sync="searchNum" :dataList.sync="searchList"   @searchName="searchName"></v-search>

	</div>
</template>

<script>
  import Vue from 'vue'
  import {MessageBox,Navbar,TabItem,TabContainer, TabContainerItem,Switch} from 'mint-ui'


  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  Vue.component(TabContainer.name, TabContainer);
  Vue.component(TabContainerItem.name, TabContainerItem);

  Vue.component(Switch.name, Switch);

  const leaderCondition = r => require.ensure([],() => r(require('@/components/leader/leaderConditionSel')),'leaderCondition');

  const leaderCard = r => require.ensure([],() => r(require('@/components/leader/cardLeader')),'leaderCard');
  
  const DownSel = r => require.ensure([],() => r(require("@/components/public/downSel")),'DownSel');

  import showLoading from '@/common/js/loading'

  import Search from '@/components/leader/searchShow'
  import Bus from '@/common/js/vueBus'
  export default {
    name: 'app',
    data() {
      return {
        sheetVisible: false,
        showMask:false,
        actions: [{
          name: '展示 Toast',
          key:'me',
          method: this.showToast.bind(this,this.selected)
        }, {
          name: '展示 Message Box',
          method: this.showMsgbox
        }],
        selected:'B',
        tableader:true,
        
        bool:true,
        value:null,
        cardList:'',
        dataSelList:null,
        totalNum:null,

        search_retire:'',
        leaderUnit_retire:'',
        topStatus: '',

        searchNum:1,
        searchList:[],

        isLoadEnd:false,
        checkType:null,
//返聘
        retireUnit:null,
//集团领导
        leaderType_leader:'',
        search_leader:"",
		    typeLeader:"2",
//集团高管
        leaderType_leader1:'',
        search_leader1:"",
        principal_leader1:"",
        backSeat_leader1:"",
        tuiyang_leader1:"",
        leaderUnit_retire1:"",
 
        unitContainer:[],

      };
    },

    methods: {
      showToast(val) {
        console.log(val);
        Toast('这是一个 Toast');
      },

      showMsgbox() {
        MessageBox('提示', '这是一个 Message Box');
      },

      clearLeaderData:function(){
          this.backSeat_leader1='';
          this.leaderUnit = '';
          this.leaderUnit_retire1="";
          this.tuiyang_leader1="";
          this.principal_leader1="";
      },



      dropDown:function(){
        this.sheetVisible = true;

      },
      move:function(event){

      },
      sentAjax:function(params,search){
          let url = search ? this.URL.executiveSearch.url : this.URL.getGroupByCondition.url;
          return this.Axios.Post(url,params);
      },
      getLeaderInfo:function(type,search){

          var self = this;      
          if (search) {
              var params = {
                search:this.search_leader1,
                pageSize:10,
                pageNum:this.searchNum,
              };
          } else {
              if (this.typeLeader === "1") {
              	//集团领导
                var params = {
                  leaderType:this.leaderType_leader1,
                  search:this.search_leader1,
                  leaderUnit:this.leaderUnit_retire
                };
              } else {
              	this.typeLeader = "2";
                var params = {
                  leaderType:this.selected,
                  search:this.search_leader,
                  principal:this.principal_leader,
                  backSeat:this.backSeat_leader,
                  tuiyang :this.tuiyang_leader,
                  leaderUnit:this.leaderUnit_retire
                };
          } 

          }
          this.sentAjax(params,search).then(function(res){

            showLoading.destroyInstance();

            var arr = JSON.parse(JSON.stringify(res.data.datas.dataNum));
            var arr1 = res.data.datas.dataList;
            
            for (var i=0; i<arr1.length; i++) {
                for (var j=0; j<arr.length; j++) {
                  
                  if (arr1[i].c_leader_unit === arr[j].c_lea_unit_name ) {
                      if (!arr[j]['memberList']){arr[j]['memberList'] = []};
                      arr[j]["memberList"].push(arr1[i]);
                      break;
                  }
                }
            }
  
            for (var z=0; z<arr.length; z++) {
                if (arr[z]['memberList'] && !arr[z]['memberList'].length) {
                    arr.splice(z,1);
                    z--;
                }
            }

            self.unitContainer = arr;   
            
            console.log(arr,'arrContainer');
            

            if (!search) {
                // self.cardList = res.data.datas.dataList;
                self.dataSelList = res.data.datas.dataNum;
                self.dataSelList.unshift({
                  c_lea_unit_name:'全部'
                });
                self.totalNum = res.data.total;
            } else {

                self.searchList = arr;
              // if (self.searchList.length === res.data.total) {
                self.isLoadEnd = true;
              // }
            }


          })
      },
      getRetireLeaderInfo:function(){
          var self = this;
          var params = {
            search:this.search_retire,
            leaderUnit:this.retireUnit
          };

          this.Axios.Post(this.URL.getRetirementByCondition.url,params).then(function(res){
              // self.cardList = res.data.datas.dataList;
              // self.totalNum = res.data.total;

                showLoading.destroyInstance();

                var arr = JSON.parse(JSON.stringify(res.data.datas.dataNum));
                var arr1 = res.data.datas.dataList;
                
                for (var i=0; i<arr1.length; i++) {
                    for (var j=0; j<arr.length; j++) {
                      
                      if (arr1[i].c_leader_unit === arr[j].c_lea_unit_name ) {
                          if (!arr[j]['memberList']){arr[j]['memberList'] = []};
                          arr[j]["memberList"].push(arr1[i]);
                          break;
                      }
                    }
                }

              

                for (var z=0; z<arr.length; z++) {
                    if (!arr[z]['memberList'].length) {
                        arr.splice(z,1);
                        z--;
                    }
                }
                
                self.unitContainer = arr;   


                // self.cardList = res.data.datas.dataList;
                self.dataSelList = res.data.datas.dataNum;
                self.dataSelList.unshift({
                  c_lea_unit_name:'全部'
                });
                self.totalNum = res.data.total;
          })
      },
      getLeader:function(type,val){
        if (type === "onoffice") {
          val ? this.principal_leader = '' : this.principal_leader = 'Y';
          this.tuiyang_leader = '';
          this.backSeat_leader = "";
        } else if(type === "offoffice"){
          this.tuiyang_leader = "";
          this.principal_leader = '';
          val ? this.backSeat_leader = '' : this.backSeat_leader = 'Y';
        } else {
          val ? this.tuiyang_leader = '' : this.tuiyang_leader = 'Y';
          this.principal_leader = '';
          this.backSeat_leader = "";
        }
        this.getLeaderInfo(1);
      },
      getCheckedValue:function(val,type){
         if (this.checkType !== "C") {

            val === "全部" ? this.leaderUnit_retire = '' : this.leaderUnit_retire = val;
            this.getLeaderInfo();    
              
         } else {
            
            val === "全部" ? this.retireUnit = '' :  this.retireUnit = val;
            this.getRetireLeaderInfo();
         }

      },
      getTopLeader:function(type,val){
        if (type === "onoffice") {
          val ? this.principal_leader1 = '' : this.principal_leader1 = 'Y';
          this.tuiyang_leader1 = '';
          this.backSeat_leader1 = "";
        } else if(type === "offoffice"){
          this.tuiyang_leader1 = "";
          this.principal_leader1 = '';
          val ? this.backSeat_leader1 = '' : this.backSeat_leader1 = 'Y';
        } else {
          val ? this.tuiyang_leader1 = '' : this.tuiyang_leader1 = 'Y';
          this.principal_leader1 = '';
          this.backSeat_leader1 = "";
        }
        this.getLeaderInfo(1);        
      },
      searchName:function(name){
        this.searchList = [];
        name = name.trim();
        if (!name){
          return;
        } 
        this.search_leader1 = name;
        this.getLeaderInfo(1,true);
      },
      clearData:function(){
          this.isLoadEnd = false;
          this.pageNum = 1;  
          this.response = [];
      },

      leaderSearch:function(){
          var params = {
              pageSize:10,
              pageNum:this.searchNum,
              search: this.searchValue
          };
          this.postAjax(this.URL.executiveSearch.url,params);      
      },
      clearSecUnit:function(){
        this.leaderUnit_retire = null;
        this.leaderUnit_retire1 = null;
        this.retireUnit = null;
      }
    },
    components: {
      'v-search': Search,
      MtNavbar:Navbar,
      'v-leader' :leaderCondition,
      'card-leader':leaderCard,
      'v-down':DownSel,
    },
    watch:{
      selected : function(newValue,oldValue){

          showLoading.showLoginPanel();
          setTimeout(function(){
              showLoading.destroyInstance();
          },14000)

          this.clearSecUnit();

          if (newValue === 'C') {
              this.checkType = 'C';
              // this.getRetireLeaderInfo();
          } else {
              this.clearLeaderData();
              this.checkType = null;
              this.leaderType_leader1 = this.selected;
              newValue === "B" ? this.typeLeader = '2' : this.typeLeader ='1';
              // this.getLeaderInfo();
          }
          
          Bus.$emit("clearCheckedUnit");
      }
    },
    mounted:function(){
      var self =this;
      // console.log(this.$store.getters.isback);
      // this.$store.dispatch('hidebackbtn');
      // console.log(this.$store.getters.isback);
      // console.log(location.search);
      this.getLeaderInfo();


      // var token = location.search.split("=")[1];
      // sessionStorage.setItem('token',token);
      
      // this.Axios.Post(this.URL.webLogin.url,{token:token}).then(res=>{
      //   this.leaderType_leader1 = this.selected;
      //   this.getLeaderInfo();
      // })


    }
  };
</script>

<style >
/*.leader-area .search-area{
  -webkit-box-flex: 0.8;
          -ms-flex: 0.8;
              flex: 0.8;
}*/
.fixedToBot{
	position:fixed;
	top:200px;
	z-index:1000;
	right:0;
	width:80px;
	height:80px;
	line-height:80px;
	border-radius:50%;
	background-color: #26A2FF;
	text-align: center;
}
.fixedToBot1{
	position:fixed;
	top:300px;
	z-index:1000;
	right:0;
	width:80px;
	height:80px;
	line-height:80px;
	border-radius:50%;
	background-color: #26A2FF;
	text-align: center;
}
.fixedToBot2{
	position:fixed;
	top:400px;
	z-index:1000;
	right:0;
	width:80px;
	height:80px;
	line-height:80px;
	border-radius:50%;
	background-color: #26A2FF;
	text-align: center;
}
.top-bar{
  vertical-align: top;
  position: relative;
  background-color:#fff;
}

.top-bar .title-con{
  width:100%;
  overflow-x: auto;

  display: inline-flex;
}
.top-bar .title-con::-webkit-scrollbar{
  display: none;
}

.leader-area .search-area{
  /*display: inline-block;*/
  top: 0;
  right: 0;
  position: absolute;
  height:1rem;
  width:1.5rem;
  vertical-align: top;
  background-color:rgba(255, 255, 255, 0.95);
}
.leader-area .top-bar img{
  width:0.28rem;
  height:0.28rem;
  margin-top: 0.35rem;
}
.leader-area {
  font-size:0.28rem;
  height:100%;
}
.leader-area .mint-tab-item-label {
    margin: auto;
    font-size: 0.32rem;
    font-weight: 600;
}
.leader-area .navbar .tab-item-leader{
  width:2rem;
}
.leader-area .navbar{
  padding-right:1rem;
}
.leader-area .mint-tab-container{
  height:100%;
  background-color: #f3f3f3;
}
.leader-area .mint-navbar .mint-tab-item.is-selected{
    border-bottom: 0px;
}
.leader-area .mint-spinner-fading-circle {
    margin: 2rem auto;
}

</style>
<style scope="scope">
.leader-area .search-area .fenge-span{
    display: inline-block;
    height:0.5rem;
    margin-left: 0.5rem;
    margin-top: 0.2rem;
    margin-right:0.3rem;
    width:0.1rem;
    /*background:url('/static/imgs/fenge.png') no-repeat;*/
}
.uint-header{
    clear: both;
    overflow: hidden;
    padding-left:0.1rem;
    padding-right:0.2rem;
}



/*.uint-header .xiala{
  margin-top:0.22rem;
}*/

</style>

